<template>
  <div class="leftCont">
    <div class="leftTop">
      <img src="static/img/logo.png">
    </div>
    <div class="navCont">
      <div class="leftListCont">
        <div class="navItem" :key="index" v-for="(item,index) in leftArr">
          <div @click="navFn(item)" :class="item.active?'navTop_active':'navTop'">
            <div :class="'iconfont '+item.icon"></div>
            <div class="navItemVal">{{item.val}}</div>
            <div :style="'transform: rotate('+(item.active?'180':'0')+'deg)'" class="openIcon el-icon-caret-bottom"></div>
          </div>
          <div class="listCont" :style="'height: '+(item.active?item.childList.length*50+'px':'0px')">
            <div @click="listFn(item2)" :class="$route.path.includes(item2.url)?'listItem_active':'listItem'" :key="index2" v-for="(item2,index2) in item.childList">
              <div>{{item2.val}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {Timer} from "@/http/api";

    export default {
        components: {},
        data() {
            return {
              leftArr:[
                  {active:false,val:'器材管理',icon:'icon-yonghuzhongxin',url:'goods',childList:[
                    {val:'器材列表',url:'/goodsAll'},
                    {val:'到期预警',url:'/goodsTip'},
                  ]},
                  {active:false,val:'密码中心',icon:'icon-yonghuzhongxin',url:'Set',childList:[
                    {val:'密码修改',url:'/passwordSet'},
                  ]},
              ],
            }
        },
        props: {},
        methods: {
          listFn(item){
            this.$router.push({path:item.url})
          },
          navFn(item){
            if(!item.active){
              for(let i = 0;i<this.leftArr.length;i++){
                this.leftArr[i].active = false
              }
              item.active=true
            }else{
              item.active = false
            }
          },
          setLeft(){
            var url = this.$route.path
            for(let i = 0;i<this.leftArr.length;i++){
              if(url.includes(this.leftArr[i].url)){
                this.leftArr[i].active = true
              }else{
                this.leftArr[i].active = false
              }
            }
          },
          checkTime(){
            // 读取数据
            var cachedData = JSON.parse(localStorage.getItem('myData'));
            console.log(cachedData)
            if (cachedData) {
                // 如果缓存存在，检查是否超过24小时
                var currentTime = new Date().getTime();
                if (currentTime - cachedData.timestamp > 24 * 60 * 60 * 1000) {
                    // 如果超过了24小时，则清空缓存
                    localStorage.removeItem('myData');
                    this.getNewTime()
                } else {
                    // 如果未超过24小时，则使用缓存数据
                    // console.log('缓存未过期，使用缓存数据：');
                }
            }else{
              this.getNewTime()
            }
          },
          getNewTime(){
            Timer().then((res)=>{
              if(res.data.code==1){
                localStorage.setItem('myData', JSON.stringify({ timestamp: new Date().getTime()}));
              }else{
                this.$message('到期时间更新失败')
              }
            })
          }
        },
        mounted() {
        },
        created() {
          this.checkTime()
          this.setLeft()
        },
    }
</script>

<style scoped lang="less">
  .leftCont{
    width: 210px;
    height: 100%;
    padding: 30px 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .leftTop{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        height: 100px;
      }
      .logoName{
        font-size: 18px;
        font-weight: bold;
        margin-left: 5px;
        color: rgb(70,70,70);
      }
    }
    .navCont{
      overflow-y: scroll;
      flex: 1;
      height: 10px;
      width: 100%;
      margin-top: 30px;
      .leftListCont{
        width: 100%;
        transition: all 0.3s linear;
        overflow: hidden;
        .navItem,.navItem2{
          width: 100%;
          line-height: 50px;
          box-sizing: border-box;
          cursor: pointer;
          margin-bottom: 15px;
          transition: all 0.3s;
          .navTop,.navTop_active{
            display: flex;
            padding:0 15px;
            box-sizing: border-box;
            align-items: center;
            background-color: #fff;
            color: #999;
            border-radius: 5px;
            justify-content: space-between;
            .openIcon{
              transition: all 0.3s linear;
            }
            .navItemVal{
              flex: 1;
              width: 10px;
            }
            .iconfont{
              margin-right: 15px;
              font-size: 20px;
            }
          }
          .navTop_active{
            background-color: #35c7d2;
            color: white;
          }
          .navTop:hover{
            background-color: #35c7d2;
            color: white;
          }
          .listCont{
            width: 100%;
            overflow: hidden;
            transition: all 0.3s linear;
            .listItem,.listItem_active{
              width: 100%;
              display: flex;
              /*border-radius: 5px;*/
              box-sizing: border-box;
              font-size: 14px;
              padding-left: 45px;
              background-color: #fff;
              color: #999;
              .iconfont{
                margin-right: 15px;
                font-size: 20px;
              }
            }
            .listItem_active{
                /*background-color: #35c7d2;*/
                color: #35c7d2;
            }
            .listItem:hover{
              color: #35c7d2;
              /*background-color: rgba(150,161,254,0.2);*/
            }
          }
        }
      }
    }
  }
</style>
<style>
  .navCont { overflow: -moz-scrollbars-none; }
  .navCont::-webkit-scrollbar { width: 0 !important }
  .navCont { -ms-overflow-style: none; }
</style>
